<template>
    <view>
        <div class="flow-table-container">
            <!-- 检索区域 -->
            <div class="search-area">
                <div class="search-item">
                    <a-input :style="{ minWidth: '240px' }" v-model:model-value="flowName" placeholder="关键词检索(名称/编码)"
                        allow-clear :max-length="16">
                        <template #prefix> <icon-search /> </template>
                    </a-input>
                </div>
                <!-- <div class="btns-list">
                    <a-button style="width: 120px;" @click="onNewFlowBtnClick()">新建分组</a-button>
                    <a-button style="width: 120px;" type="primary" @click="toCreate()">
                        创建审批

                        <template #icon> <icon-plus /> </template>
                    </a-button>
                </div> -->
            </div>
            <div class="flow-table-main">

                <div class="flow-table-content">
                    <AntdZh>
                        <a-table bordered :columns="columns" :data-source="tableData" :loading="tableLoading"
                            :pagination="false" rowKey="id" @change="handleTableChange">
                            <template #expandedRowRender="{ record }">
                                <!--事件列表-->
                                <WorkExtend></WorkExtend>
                            </template>
                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.dataIndex === 'status'">
                                    <!--执行状态-->
                                    <a-tag color="green" v-if="record.status">启用</a-tag>
                                    <a-tag color="red" v-else>停用</a-tag>

                                </template>
                                <template v-if="column.dataIndex === 'currentNode'">
                                    <view v-if="$.isEmpty(record.currentNode)">
                                        rv-check
                                    </view>
                                </template>
                                <template v-if="column.dataIndex === 'flowWorkStatus'">
                                    <!--执行状态-->
                                    <a-badge color="cyan" text="准备中" v-if="record.flowWorkStatus === '准备中'" />

                                </template>
                                <template v-else-if="column.dataIndex === 'flowDefine'">
                                    <a-popover title="流程定义">
                                        <template #content>
                                            <JsonEditor style="width: 400px;" v-model:value="record.flowDefine"
                                                readOnly>
                                            </JsonEditor>
                                        </template>
                                        <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                                    </a-popover>
                                </template>
                                <template v-else-if="column.dataIndex === 'flowParam'">
                                    <a-popover title="流程定义">
                                        <template #content>
                                            <JsonEditor style="width: 400px;" v-model:value="record.flowParam" readOnly>
                                            </JsonEditor>
                                        </template>
                                        <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                                    </a-popover>
                                </template>
                                <template v-if="column.dataIndex === 'action'">
                                    <a-row>
                                        <a-col :span="6">
                                            <a-tooltip>
                                                <template #title>恢复</template>
                                                <a-button type="link" @click="$.emit('flow-recover', record)">
                                                    <UnlockOutlined style="color: green;" />
                                                </a-button>

                                            </a-tooltip>
                                        </a-col>
                                        <a-col :span="6">
                                            <a-tooltip>
                                                <template #title>挂起</template>
                                                <a-button type="link" @click="$.emit('flow-hangup', record)">
                                                    <LockOutlined style="color: red;" />
                                                </a-button>

                                            </a-tooltip>
                                        </a-col>
                                        <a-col :span="6">
                                            <a-tooltip>
                                                <template #title>关闭</template>
                                                <a-button type="link" @click="$.emit('flow-hangup', record)">
                                                    <PoweroffOutlined style="color: red;" />
                                                </a-button>

                                            </a-tooltip>
                                        </a-col>
                                        <a-col :span="6">
                                            <a-tooltip>
                                                <template #title>审计</template>
                                                <a-button type="link" @click="$.emit('flow-hangup', record)">
                                                    <BarChartOutlined />
                                                </a-button>

                                            </a-tooltip>
                                        </a-col>

                                    </a-row>
                                </template>
                            </template>
                        </a-table>
                    </AntdZh>

                </div>
                <div class="fenye" v-if="query.total > 0">
                    <a-pagination show-total @change="reqData" :total="query.total" v-model:page-size="query.pageSize"
                        v-model:current="query.pageNum" />
                </div>
                <view style="width: 100;height:500px"></view>
            </div>
        </div>

    </view>
</template>

<script setup>
import useApp from '@/hooks';
const { $ } = useApp();
import { useFlowStore } from "@/stores/index";
import WorkExtend from "./components/WorkExtend/index.vue";
const flowStore = useFlowStore();
import { SafetyOutlined, CodeOutlined, PlayCircleOutlined, PoweroffOutlined, LockOutlined, UnlockOutlined, BarChartOutlined } from '@ant-design/icons-vue';
import { Table as ATable, Button as AButton, Tooltip as ATooltip, Popconfirm as APopconfirm } from "ant-design-vue";
import { IconSearch, IconPlus, IconDelete, IconEdit, IconStop, IconCheckCircle } from "@arco-design/web-vue/es/icon";
import { columns } from './flow-work';
import { createOne, updateOne, queryOne, queryList } from "@/api/FlowWork";
const tableData = ref([])
const tableLoading = ref(false)
const query = ref({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
// 跳转新建
function toCreate() {
    $.navigateTo({
        url: '/flowmanedit'
    })
}
function handleTableChange(page, filters, sorted) {
    // 获取 status
    // 状态
    var status = filters.status;
    if ($.isNotEmpty(status)) {
        query.value.status = status[0];
    } else {
        query.value.status = null
    }
    reqData();
}
function reqData() {
    tableLoading.value = true;
    queryList(query.value).then(res => {
        tableLoading.value = false;
        tableData.value = res.content;
        query.value.total = res.totalElements;
    })
}
reqData();
</script>


<style lang="less">
@import "@/styles/ftable.less";
</style>